@import "reset.scss";
@import "./theme/codehight/light.scss";
@import "./theme/codehight/dark.scss";

:root {
  --yh-brand-color-11: rgba(1, 142, 154, .65);
  --yh-gray-color-15: #f3f1f1;
  --yh-bg-color-tertiarycontainer: var(--yh-gray-color-15);


  --yh-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
  --yh-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);



  .over-root {

    --yh-brand-color-1: #ECFEFF;
    --yh-brand-color-10: #005B62;
    --yh-warning-color-5: #ed7b2f;
    --yh-warning-color-7: #ba431b;
    --yh-warning-color-8: #9e3610;
    --yh-warning-color-9: #842b0b;
    --yh-warning-color-10: #5a1907;
    --yh-success-color-5: #00a870;
    --yh-success-color-7: #067945;
    --yh-success-color-8: #056334;
    --yh-success-color-9: #044f2a;
    --yh-success-color-10: #033017;
    --yh-error-color-4: #f78d94;
    --yh-error-color-6: #e34d59;
    --yh-error-color-8: #b11f26;
    --yh-error-color-9: #951114;
    --yh-error-color-10: #680506;
    --yh-gray-color-8: #777;


    --yh-brand-color-light: var(--yh-brand-color-1);
    --yh-shadow-inset-top: inset 0 .5px 0 #dcdcdc;
    --yh-shadow-inset-right: inset .5px 0 0 #dcdcdc;
    --yh-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;
    --yh-shadow-inset-left: inset -.5px 0 0 #dcdcdc;
    --yh-table-shadow-color: rgba(0, 0, 0, .08);
    --yh-scrollbar-color: rgba(0, 0, 0, .1);
    --yh-bg-color-specialcomponent: #fff;
  }


  .menu-root {
    --menu-one-title: var(--yh-font-gray-1);
    --menu-two-title: var(--yh-font-gray-2);
  }

  --code-bg: #f3f3f3;
  --code-bg-line: #f9fafc;
  --code-bg-line-border: #eaeefb;
  --header-bottom-color: #dcdfe6;
  --bg-color-tab-select: #fff;
  --border-radius: 3px;
  --text-disabled: rgba(0, 0, 0, .26);
  --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
  --anim-duration-moderate: .24s;
  --bg-color-component: #eee;
  --header-logo-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
  rgba(255, 255, 255, 0.2) 1px 3px 3px;

  // --bg-color-footer: #eee;
  --bg-color-footer: #f7fbfd;
  --footer-box-shadow: inset 0 1px 0 #e7e7e7;
  --text-placeholder: rgba(0, 0, 0, .4);
  --text-primary: rgba(0, 0, 0, .9);
  --bg-color-code: #f3f3f3;
  --component-border: #e7e7e7;
}

:root[theme-mode=dark] {
  --yh-brand-color-11: rgba(1, 142, 154, .6);
  --yh-shadow-1: 0 4px 6px rgba(0, 0, 0, .06), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
  --yh-shadow-2: 0 8px 10px rgba(0, 0, 0, .12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
  --yh-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);


  .over-root {

    --yh-brand-color-1: #003f45;
    --yh-brand-color-10: #33a4ae;
    --yh-warning-color-5: #cf6e2d;
    --yh-warning-color-7: #e8935c;
    --yh-warning-color-8: #ecbf91;
    --yh-warning-color-9: #eed7bf;
    --yh-warning-color-10: #f3e9dc;
    --yh-error-color-4: #83383e;
    --yh-error-color-6: #c64751;

    --yh-error-color-8: #ec888e;
    --yh-error-color-9: #edb1b6;
    --yh-error-color-10: #eeced0;
    --yh-success-color-5: #059465;

    --yh-success-color-7: #46bf96;
    --yh-success-color-8: #80d2b6;
    --yh-success-color-9: #b4e1d3;
    --yh-success-color-10: #deede8;
    --yh-gray-color-8: #777;
    --yh-mask-disabled: rgba(0, 0, 0, .6);

    --yh-brand-color-light: var(--yh-brand-color-1);
    --yh-shadow-inset-top: inset 0 .5px 0 #5e5e5e;
    --yh-shadow-inset-right: inset .5px 0 0 #5e5e5e;
    --yh-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
    --yh-shadow-inset-left: inset -.5px 0 0 #5e5e5e;
    --yh-table-shadow-color: rgba(0, 0, 0, .55);
    --yh-scrollbar-color: rgba(255, 255, 255, .1);
    --yh-bg-color-specialcomponent: transparent;
  }



  .menu-root {
    --menu-one-title: var(--yh-font-white-1);
    --menu-two-title: var(--yh-font-white-1);
  }



  --code-bg: #2c2c2c;
  --code-bg-line: #444444;
  --code-bg-line-border: #5e5e5e;
  --header-bottom-color: #666666;
  --bg-color-tab-select: #4b4b4b;
  --text-disabled: rgba(255, 255, 255, .22);
  --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
  --anim-duration-moderate: .24s;
  --bg-color-component: #383838;
  --header-logo-shadow: rgba(0, 0, 0, 0.5) 0 5px 6px,
  rgba(0, 0, 0, 0.2) 1px 3px 3px;

  --bg-color-footer: #181818;
  --footer-box-shadow: inset 0 1px 0 #4b4b4b;
  --text-placeholder: rgba(255, 255, 255, .35);
  --text-primary: rgba(255, 255, 255, .9);
  --bg-color-code: #2c2c2c;
  --component-border: #4b4b4b;
}

html,
body {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

a {
  color: #409eff;
}

h2,
h4,
h3 {
  font-weight: 400;
  // color: #1f2f3d;
  color: var(--yh-text-color-primary);
}

h2 {
  font-size: 26px;
}

h3 {
  margin: 40px 0 20px;
  font-size: 22px;

  >a:first-child {
    opacity: 0;
    float: left;
    margin-left: -20px;
    cursor: pointer;

  }

  &:hover {
    >a:first-child {
      opacity: 1;
    }
  }
}

h4 {
  height: 22px;
  line-height: 22px;
  margin: 21px 0;
  font-size: 16px;
}

p {
  font-size: 14px;
  // color: #5e6d82;
  color: var(--yh-text-color-secondary);
  line-height: 1.5em;
  margin: 14px 0;
}

.tables {
  border-collapse: collapse;
  width: 100%;
  // background-color: #fff;
  background-color: var(--yh-bg-color-container);
  font-size: 14px;
  margin-bottom: 45px;
  line-height: 1.5em;
  text-align: left;
  margin-top: 22px;

}

.tables th,
.tables td {
  border-bottom: 1px solid var(--yh-component-border);
  padding: 15px;
  max-width: 250px;
  // color: #606266;
  color: var(--yh-text-color-secondary);
}

.tables th {
  color: #909399;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.yh-content {
  width: 100%;
  height: 100%;
}

.warning {
  padding: 8px 16px;
  background-color: var(--yh-error-color-1);
  border-radius: 4px;
  border-left: 5px solid var(--yh-error-color-5);
  ;
  margin: 20px 0;
}

.success {
  padding: 8px 16px;
  background-color: var(--yh-success-color-1);
  border-radius: 4px;
  border-left: 5px solid var(--yh-success-color-5);
  ;
  margin: 20px 0;
}

.tipdefault {
  padding: 8px 16px;
  background-color: var(--yh-remind-color-2);
  border-radius: 4px;
  border-left: 5px solid var(--yh-remind-color-5);
  margin: 20px 0;
}